<template>
  <div class="yield">
    <el-card class="box-card">
      <div class="amount">
        <!-- 生产总数显示 -->
        <el-row :gutter="20">
          <el-col :span="4"  v-for="(imet, index) in production" :key="index">
            <div class="grid-content bg-purple" @click="GoToUrl(imet.name)">
              <div class="title">
                <h3>{{ imet.authName }}:</h3>
              </div>
              <div class="reality">总数：{{ imet.sum }}</div>
              <div class="reality">实际：{{ imet.reality }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 进度显示 -->
      <div class="second">
        <router-view />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      production: [
        {
          authName: "生产数量",
          sum: 6222,
          reality: 7774,
          isActive: true,
          name: "Plan",
        },
        {
          authName: "效率分析",
          sum: 6625,
          reality: 300,
          isActive: false,
          name: "Efficiency",
        },
        {
          authName: "仓库出入",
          sum: 5000,
          reality: 4000,
          isActive: false,
          name: "Entrepot",
        },
        {
          authName: "投料数量",
          sum: 6666,
          reality: 1000,
          isActive: false,
          name: "Batch",
        },
        {
          authName: "报废退料",
          sum: 6625,
          reality: 300,
          isActive: false,
          name: "Scrap",
        },
        {
          authName: "异常情况",
          sum: 6625,
          reality: 300,
          isActive: false,
          name: "Anomaly",
        },
      ],
    };
  },
  mounted() {
    this.GoToUrl("Plan");
  },
  methods: {
    GoToUrl(sax) {
      this.$router.push({ name: sax });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/yield.less";
</style>